<template>
    <div class="writeContent">
        <div class="writeBox">
            <van-image v-if="image" :src="image" />
            <van-signature
                class="custom-signature"
                style="min-height: 400px;"
                :height="400"
                :line-width="4" 
                background-color="#eee"
                @submit="onSubmit"
                @clear="onClear"
                clear-button-text="重新开始"
                confirm-button-text="生成图片"
            />
        </div>
    </div>
</template>
    
<script setup lang="ts">
import { ref, onMounted, computed, onUnmounted } from 'vue'
import { useRoute, useRouter } from 'vue-router'
import { showToast, showFailToast, showConfirmDialog, showNotify } from 'vant'


const route = useRoute()
const router = useRouter()

const image = ref('');

const onSubmit = (data) => {
    image.value = data.image;
    console.log(image.value)
};

const onClear = () => {
    image.value = ''
    showToast('清除成功')
}



onMounted(() => {
    
})

onUnmounted(() => {
    
})

</script>


<style lang="scss" scoped>
.writeContent {
    width: 100vw;
    height: 100vh;
    padding: 0 15px;
    overflow: hidden;
    .writeBox {
        width: 100%;
        height: auto;
        overflow: hidden;
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        .custom-signature {
            width: 100%;
            height: auto;
            // :deep(van-signature custom-signature) {
            //     height: 600px;
            // }
            // :deep(van-signature__content) {
            //     height: 400px;
            // }
            :deep(.van-button) {
                margin-top: 30px;
                width: 100%;
                min-height: 45px;
                border-radius: 16px;
                border: none;
                background-color: #192566;
                &:nth-child(1) {
                    background-color: #f19c73;
                    color: #FFFFFF;
                }
            }
            :deep(.van-button .van-button__content .van-button__text) {
                width: 100%;
                font-size: 14px;
            }
        }
    }
}
</style>